<template>
  <div style="height: 100%;" class="app-container">
    <el-form inline>
      <el-form-item>
        <el-button type="success" @click="chuxian = !chuxian">添加公告</el-button>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="formdata.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="formdata.typeId" clearable>
          <el-option v-for="item in arry" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getgonggaolei">搜索</el-button>
      </el-form-item>
    </el-form>



    <el-table :data="gonggaosj" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号ID" width="150">
      </el-table-column>
      <el-table-column prop="title" label="公告标题" width="120">
      </el-table-column>
      <el-table-column prop="typeName" label="公告分类" width="120">
      </el-table-column>
      <el-table-column prop="publishDate" label="发布时间" width="120">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="gai(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <div>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="formdata.page" :page-sizes="[10, 20, 30, 40]" :page-size="formdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="公告编辑" :visible.sync="chuxian">
          <zenj @done="done" :arry="arry" :info="info" :key="chuxian"></zenj>
        </el-dialog>


      </div>
    </div>


  </div>
</template>


<script>
import { gonggaolei, gonggaomc, gonggaosc } from '@/api/index'

import  zenj  from '@/components/gonggao/zenggai.vue'
export default {
  components:{ zenj },




  data() {
    return {
      info: {},
      total: 0,
      formdata: {
        page: 1,
        pageSize: 10,
        title: '',
        typeId: '',

      },
      chuxian: false,

      gonggaosj: [],
      arry: []
    }
  },
  methods: {





    getgonggaomc() {
      gonggaomc().then(res => {
        console.log(res, 3456);
        this.arry = res.data
        console.log(this.arry, 555);

        this.getgonggaolei()
      })
    },



    getgonggaolei() {
      gonggaolei(this.formdata).then(res => {
        console.log(res, 333);
        console.log(1);
        console.log(res.data.records, 1111);
        res.data.records.forEach(item => {
          console.log(1);

          let cate = this.arry.find(it => it.id == item.typeId)


          console.log(cate, 987);
          if (cate && cate.typeName) {
            item["typeName"] = cate.typeName
          }

          // console.log(cate.typeName, 45678);
          // console.log(this.typeName,8888);




        })
        this.gonggaosj = res.data.records,
          this.total = res.data.total
      })
    },




    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formdata.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formdata.page = val
      this.getgonggaomc()
    },
    done() {
      this.chuxian = false;
      this.getgonggaolei()

    },

    gai(info) {
      this.info = info
      this.chuxian = true
    },

    handleDel(id) {
      this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        gonggaosc({ id }).then(res => {
          console.log(1)
          this.$message({
            type: 'success',
            message: '删除成功!'


          });
          this.getgonggaolei()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },



  },
  mounted() {
    this.getgonggaomc()
  }
}
</script>